<template>
    <div>
        <div class="content">
            <div class="top">
                <div></div>
                <el-button type="primary" size="small" @click="clickToAdd">+ 新增权限</el-button>
            </div>
            <el-table
                :data="permitData.items"
                @click="clickToReget"
                size="mini"
                row-key="id"
                fit
                default-expand-all
                style="width: calc(100% - 20px);margin-left: 10px;"
                max-height="550px"
            >
                <el-table-column
                    prop="id"
                    label="id"
                    width="180"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="权限名称"
                    width="180"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="path"
                    label="path"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="code"
                    label="code"
                    width="180"
                    align="left">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="160" align="center">
                    <template slot-scope="{row}">
                        {{ $formatDateTime(row.createTime) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="160">
                    <template slot-scope="{ row, $index }">
                        <el-button type="text" @click="clickToAddPermit($event, row)"
                        >新增
                        </el-button
                        >
                        <el-button type="text" @click="clickToEdit($event, row)">修改</el-button>
                        <el-button
                            type="text"
                            @click="clickToDel($event, row)"
                            style="color: red">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">

            </div>
        </div>
        <Create ref="create"></Create>
        <Update ref="update"></Update>
    </div>
</template>

<script>
import {permitList, delPermit} from "@/admin/api/admin/backStage/permit/permit";

export default {
    data() {
        return {
            input: "",
            form: {
                page: 1,
                size: 10,
                total: 0,
                mode: "tree",
            },
            permitData: [],
        };
    },
    methods: {
        clickToAdd() {
            this.$refs.create.showDialog();
        },
        clickToAddPermit(e, row) {
            this.$refs.create.showDialogPermit(row.id);
        },
        clickToEdit(e, row) {
            this.$refs.update.showDialog(row);
        },
        clickToDel(e, row) {
            this.$confirm("确定要删除吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    delPermit(row.id).then((res) => {
                        if (res.code == 200) {
                            this.$message({
                                message: res.message,
                                type: "success",
                            });
                            this.getData();
                        } else {
                            this.$message({
                                message: res.message,
                                type: "error",
                            });
                        }
                    });
                })
                .catch(() => {
                })
        },
        getData() {
            permitList(this.form).then((res) => {
                if (res.code == 200) {
                    this.permitData = res.data;
                    this.$nextTick(() => {
                        // console.log(123);
                    });
                }
            });
        },
        clickToReget() {
            this.getData();
        },
    },
    mounted() {
        this.getData();
    },
    components: {
        Create: () => import("./create"),
        Update: () => import("./update"),
    },
};
</script>

<style lang="less" scoped>
.search {
    width: 100%;
    height: 10vh;
    background-color: #fff;
    display: flex;
    align-items: center;
    margin-top: 2vh;
    border-radius: 5px;

    .search_name {
        display: flex;
        align-items: center;
        margin-left: 2vw;

        .name {
            width: 5vw;
            font-size: 15px;
        }
    }

    .select {
        margin-left: 2vw;
    }
}

.content {
    width: 100%;
    //   height: 45vh;
    background-color: #fff;
    border-radius: 5px;
    margin-top: 2.5vh;


    .top {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-button {
            margin-right: 3vw;
        }
    }
}

</style>
